<template>
  <div class="space-user">
    <a-card title="空间用户行为">
      <v-chart :option="options" style="height: 320px; max-width: 100%" :loading="loading" />
      <template #extra>
        <a-segmented v-model:value="timeDimension" :options="timeDimensionOptions" />
      </template>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import 'echarts'
import VChart from 'vue-echarts'
import { computed, ref, watchEffect } from 'vue'
import { getSpaceUserAnalyzeUsingPost } from '@/api/spaceAnalyzeController.ts'
import { message } from 'ant-design-vue'

interface Porps {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: string
}

const props = withDefaults(defineProps<Porps>(), {
  queryAll: false,
  queryPublic: false,
})
// 时间维度
const timeDimension = ref<'day' | 'week' | 'month'>('day')
const timeDimensionOptions = [
  {
    label: '按日统计',
    value: 'day',
  },
  {
    label: '按周统计',
    value: 'week',
  },
  {
    label: '按月统计',
    value: 'month',
  },
]
const userId = ref<string>()
const dataList = ref<API.SpaceCategoryAnalyzeVO[]>([])
const loading = ref(false)
const fetchData = async () => {
  loading.value = true
  try {
    const res = await getSpaceUserAnalyzeUsingPost({
      queryAll: props.queryAll,
      queryPublic: props.queryPublic,
      spaceId: props.spaceId,
      timeDimension: timeDimension.value,
      userId: userId.value,
    })
    dataList.value = res.data
  } catch (e) {
    message.error(e)
  } finally {
    loading.value = false
  }
}
// 图表选项
const options = computed(() => {
  const periods = dataList.value.map((item) => item.period)
  const counts = dataList.value.map((item) => item.count)
  return {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      name: '时间区间',
      data: periods,
    },
    yAxis: {
      type: 'value',
      name: '上传数量',
    },
    series: [
      {
        name: '上传数量',
        type: 'line',
        data: counts,
        smooth: true, // 平滑曲线
        emphasis: {
          focus: 'series',
        },
      },
    ],
  }
})
// 加载数据
watchEffect(() => {
  fetchData()
})
</script>

<style scoped></style>
